<template>
	<view>
		<view class="order-content">
			<van-skeleton title row="13" :loading="loading">
			<view style="margin-bottom: 40rpx;">
				<view class="detail-title">
					<text>完工备案表</text>
				</view>
			</view>
			<view v-if="checkList.length" class="check-content" style="margin-bottom: 20rpx;">
				<!-- <view class="check-title">巡逻检查项{{'(' + checkList.length + ')'}}</view> -->
				<view class="check-item" v-for="(item, index) in checkList" :key="item.id">
					<view :class="{'rightColor': item.pass == 1, 'wrongColor': item.pass === 2}">
						{{index+1}}、{{item.item}}
					</view>
					<view class="check-result">
						<uni-data-checkbox :selectedColor="item.pass == 1 ? '#33cc33' : 'red'" v-model="item.pass"
							:localdata="item.status"></uni-data-checkbox>
					</view>
					<inspect-record :inspect="item"
						v-if="item.pass == 2 && (item.remark || item.accessory.length !== 0)"></inspect-record>

				</view>
			</view>
			<view style="margin-bottom: 40rpx;">
				<view class="detail-title">
					<text>确认信息</text>
				</view>
				<view v-show="renovationInfo.acceptOwnerSign[0]" class="confirm-item">
					<view class="confirm-label">业主签字：</view>
					<view class="sign-item">
						<imageViewer :imageWidth="220" v-model="renovationInfo.acceptOwnerSign" />
					</view>
				</view>
				<view v-show="renovationInfo.acceptFitmanagerSign[0]" class="confirm-item">
					<view class="confirm-label">装修单位签字：</view>
					<view class="sign-item">
						<imageViewer :imageWidth="220" v-model="renovationInfo.acceptFitmanagerSign" />
					</view>
				</view>
				<view v-if="renovationInfo.unpassSolveTime" class="confirm-item">
					<view class="confirm-label">不合格整改期限：</view>
					<view>{{renovationInfo.unpassSolveTime | formatTime}}</view>
					<!-- <van-stepper @change="onChange" input-width="120rpx" button-size="64rpx" :value="rectifyTime"
						min="0" /> -->
				</view>
				<view>
					备注：1、水电隐蔽工程改动后，若出现施工问题造成的任何损失由业主自行处理，物业管理方不承担任何责任；</view>
				<view>
					2、此表不对装修工程质量作任何评判，仅对以上各项目是否符合《装修服务协议》的约定做表象判断；</view>
				<view>
					3、此表仅作为装修完工时间界定，不做其它用途。</view>
			</view>
			</van-skeleton>
		</view>
		<submit-btn v-if="renovationInfo.stage !== 'reback_earnest'" @click.native="completeRectify" desc="整改完成"></submit-btn>
	</view>
</template>

<script>
	import SubmitBtn from '@/myComponents/submitBtn.vue'
	import imageViewer from '@/myComponents/imageViewer.vue'
	import InspectRecord from '../components/inspectRecord.vue'
	export default {
		components: {
			SubmitBtn,
			InspectRecord,
			imageViewer
		},
		data() {
			return {
				loading: true,
				renovationInfo: {
					fitstartCheckConfirmAcc: [],
					acceptOwnerSign: [],
					acceptFitmanagerSign: []
				},
				params1: [],
				resultUrl: '../../static/icon/8.png',
				status: [{
						text: '合格',
						value: 1,
						disable: false
					},
					{
						text: '不合格',
						value: 2,
						disable: false
					}
				],
				checkList: [],
				protectList: [],
				params: {
					applyId: null,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params2: {
					id: null,
					stage: 'accept',
					isNext: true,
					fitstartCheckRemark: null,
					fitstartCheckConfirmAcc: null
				}
			}
		},
		onLoad(options) {
			this.params.applyId = +options.id
			this.params2.id = +options.id
			this.getDetail()
			this.getInfo(+options.id)
		},
		onShow() {
			if (uni.getStorageSync('ceshiUrl')) {
				this.resultUrl = uni.getStorageSync('ceshiUrl');
				uni.removeStorageSync('ceshiUrl');
			}
		},
		methods: {
			async completeRectify() {
				const msg = await this.updateCheckList()
				const msg1 = await this.updateInfo()
				if (msg && msg1) {
					uni.redirectTo({
						url: '/ticketSystem/acceptSuccess/acceptSuccess?path=/pages/service/service' +
							'&title=返回服务页面'
					})
					// uni.redirectTo({
					// 	url: '/ticketSystem/acceptSuccess/acceptSuccess?path=/materialSystem/index/index' + '&title=返回物料首页'
					// })
				} else {
					uni.showToast({
						title: '提交失败,请稍后再试',
						icon: 'none'
					})
				}
			},
			updateCheckList() {
				return new Promise((resolve, reject) => {
					uni.showLoading()
					let list = JSON.parse(JSON.stringify(this.checkList))
					list.forEach(item => {
						item.pass = 1
					})
					this.$http.post('/fitment/acceptitem/batchUpdate', {
						list
					}).then(res => {
						if (res.code === 10000) {
							resolve(res.msg)
						}
					})
				})
			},
			updateInfo() {
				return new Promise((resolve, reject) => {
					this.$http.post('/fitment/apply/update', this.params2).then(res => {
						if (res.code === 10000) {
							resolve(res.msg)
						}
					})
				})
			},
			getInfo(id) {
				this.$http.post('/fitment/apply/info', {
					id
				}).then(res => {
					if (res.code === 10000) {
						console.log(res)
						res.data.fitstartCheckConfirmAcc = [res.data.fitstartCheckConfirmAcc]
						res.data.acceptOwnerSign = [res.data.acceptOwnerSign]
						res.data.acceptFitmanagerSign = [res.data.acceptFitmanagerSign]
						this.renovationInfo = res.data
						this.loading = false
					}
				})
			},
			getDetail() {
				// uni.showLoading()
				this.$http.post('/fitment/acceptitem/list', this.params).then(res => {
					if (res.code === 10000) {
						res.data.list = res.data.list || []

						res.data.list.forEach(item => {
							item.status = [{
									text: '合格',
									value: 1
								},
								{
									text: '不合格',
									value: 2
								}
							]
							let index = item.pass == 1 ? 1 : 0
							item.status[index].disable = true
						})
						this.checkList = res.data.list

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../style/info.scss';

	.sign-item {
		// margin-left: 20rpx;
		width: 220rpx;
		height: 220rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.confirm-item {
		display: flex;
		align-items: center;
		padding-right: 20rpx;
		margin-bottom: 60rpx;

		.confirm-label {
			width: 256rpx;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
		}

		// justify-content: space-between;
	}

	.confirm-desc {
		width: 452rpx;
		padding: 20rpx;
		border: 2rpx solid #ccc;

	}

	.rightColor {
		color: #33cc33;
		// color: #49B980;
	}

	.wrongColor {
		color: red;
	}

	.check-content {
		height: auto;
		width: 680rpx;
		// border: 2rpx solid #ccc;
		// background-color: pink;
		// padding: 20rpx;

		.install-type {
			font-size: 36rpx;
		}

		.check-title {
			height: 80rpx;
			font-size: 40rpx;
			text-align: center;
			line-height: 60rpx;
			border-bottom: 2rpx solid #DEDEDE;
			margin-bottom: 30rpx;
		}

		.check-item {
			margin-bottom: 40rpx;
			font-size: 32rpx;

		}

		.check-result {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-bottom: 20rpx;

			.switch {
				color: #3080FB;
			}
		}
	}
</style>
